<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <!-- 头像和昵称部分 -->
      <div class="user-info">
        <img
          :src="userInfo.userImg || 'https://glut-elm.oss-cn-guangzhou.aliyuncs.com/photo/img/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/moren.jpg'"
          alt="个人头像"
          @click="showImage = true"
        />
        <!-- 放大显示图片的模态框 -->
        <div v-if="showImage" class="overlay" @click="showImage = false">
          <img
            class="large-image"
            :src="userInfo.userImg || 'https://glut-elm.oss-cn-guangzhou.aliyuncs.com/photo/img/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/moren.jpg'"
            alt="放大图片"
          />
        </div>
        <p class="username">{{ userInfo.username || '未设置' }}</p>
      </div>

      <!-- 设置按钮 -->
      <div class="fa fa-cog" id="settingsBtn" @click="goToSettings"></div>
    </header>

    <!-- Order Section -->
    <div class="order-section">
      <h3>我的订单</h3>
      <div class="order-options">
        <div class="option">
          <i class="fa fa-file-text" @click="toOrderList"></i>
          <p>全部</p>
        </div>
        <div class="option">
          <i class="fa fa-truck"></i>
          <p>进行中</p>
        </div>
        <div class="option">
          <i class="fa fa-commenting" @click="toAppraise"></i>
          <p>已评价</p>
        </div>
        <div class="option">
          <i class="fa fa-undo"></i>
          <p>退款</p>
        </div>
      </div>
    </div>

    <!-- Additional Functions Section -->
    <div class="more-functions">
      <h3>更多功能</h3>
      <div class="function-options">
        <div class="option">
          <i class="fa fa-map-marker" @click="toUserAddress"></i>
          <p>我的地址</p>
        </div>
        <div class="option">
          <i class="fa fa-user"></i>
          <p>我的客服</p>
        </div>
        <div class="option">
          <i class="fa fa-jpy"></i>
          <p>我的账单</p>
        </div>
        <div class="option">
          <i class="fa fa-history"></i>
          <p>浏览记录</p>
        </div>
      </div>
    </div>

    <!-- 退出登录部分 -->
    <div class="payment-button">
      <button @click="logout">退出登录</button>
    </div>
  </div>
</template>

<script>
import { showToast } from "vant";
export default {
  data() {
    return {
      userInfo: {}, // 用户信息
      showImage: false, // 控制放大图片的显示与隐藏
      defaultImage:
        "https://glut-elm.oss-cn-guangzhou.aliyuncs.com/photo/img/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/moren.jpg"
    };
  },
  mounted() {
    const user = JSON.parse(sessionStorage.getItem("user"));
    if (user && user.username) {
      this.getUserInfo(user.username);
    }
  },
  methods: {
    // 获取用户信息
    getUserInfo(username) {
      this.$http
        .get(`/users/profile`, { params: { username } })
        .then(res => {
          if (res.data.flag) {
            this.userInfo = res.data.object;
          } else {
            showToast({
              message: "获取个人信息失败",
              icon: "close"
            });
          }
        })
        .catch(err => {
          console.error("获取个人信息时出错", err);
          showToast({
              message: "获取个人信息失败,请重试",
              icon: "close"
            });
        });
    },
    // 退出登录
    logout() {
      sessionStorage.setItem("user", null);
      this.$router.push("/login");
    },
    // 跳转到设置页面
    goToSettings() {
      this.$router.push("/settings");
    },
    // 跳转到其它页面的事件
    toOrderList() {
      this.$router.push("/orderList");
    },
    toUserAddress() {
      this.$router.push("/userAddress");
    },
    toAppraise(){
      this.$router.push("/appraise");
    }
  }
};
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 25vw; /* header的高度 */
  background-color: #0097ff;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between; /* 确保头像/昵称居左，设置按钮居右 */
  align-items: center;
  padding: 0 2vw;
}

/****************** 头像和昵称部分 ******************/
.user-info {
  display: flex;
  align-items: center;
  padding-left: 2vw;
}

.user-info img {
  width: 15vw; /* 调整头像大小 */
  height: 15vw; /* 调整头像大小 */
  border-radius: 50%; /* 保持圆形 */
  margin-right: 2vw;
  border: 3px solid #fff; /* 添加白色边框 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
  transition: transform 0.3s; /* 添加动画效果 */
}

.user-info img:hover {
  transform: scale(1.1); /* 悬停时放大 */
}

.username {
  font-size: 6vw; /* 调整字体大小 */
  color: #fff; /* 字体颜色 */
  font-weight: bold; /* 加粗字体 */
  font-family: "Arial", sans-serif; /* 使用现代字体 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* 添加文本阴影 */
}

/****************** 设置按钮样式 ******************/
#settingsBtn {
  font-size: 6vw; /* 设置按钮字体稍大，确保显示完整 */
  cursor: pointer;
  padding-right: 4vw;
}

/****************** 退出按钮部分 ******************/
.wrapper .payment-button {
  width: 100%;
  box-sizing: border-box;
  padding: 4vw;
}

.wrapper .payment-button button {
  width: 100%;
  height: 10vw;
  border: none;
  outline: none;
  border-radius: 4px;
  background-color: #38ca73;
  color: #fff;
  cursor: pointer;
}

.wrapper .payment-button button:hover {
  background-color: #34b362;
}

.order-section {
  margin-top: 30vw;
  padding: 15px;
  border-radius: 10px;
}
.more-functions {
  margin-top: 5vw;
  padding: 15px;
  border-radius: 10px;
}
.order-options,
.function-options {
  display: flex;
  justify-content: space-around;
  margin-top: 16px;
}

.benefit,
.option,
.item {
  text-align: center;
  color: #333;
}

.more-functions h3,
.order-section h3 {
  margin-bottom: 10px;
}
/* 放大图片的模态框 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw; /* 使用视口宽度，确保全屏 */
  height: 100vh; /* 使用视口高度，确保全屏 */
  background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
  display: flex;
  justify-content: center; /* 水平居中内容 */
  align-items: center; /* 垂直居中内容 */
  z-index: 1000; /* 确保在其他元素之上 */
}

.user-info.large-image {

  max-width: 90%; /* 最大宽度为90% */
  max-height: 90%; /* 最大高度为90% */
  object-fit: contain; /* 保持比例 */
  transition: transform 0.3s ease; /* 添加过渡效果 */
  cursor: zoom-in; /* 鼠标悬停时显示放大手型光标 */
}


/* 关闭模态框时，点击遮罩区域 */
.overlay:hover {
  cursor: pointer;
}
</style>
